<template lang="html">
    <div class="">
        
        <div class="top_block">
            <el-button
                type="primary"
                @click="timeoffFormDisplay"
                class="timeoffButton"
                size="small">
                请假申请
            </el-button>
        </div>
        <div class="table_block">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="tableDatadisplay">
                <el-table-column
                    prop="timeoff_days"
                    label="请假人"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.leaveName}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="timeoff_days"
                    label="请假原因"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.leaveInfo}}</div>
                    </template>
                </el-table-column>                                   
                <el-table-column
                    label="请假日期"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{$moment(scope.row.startTime).format('YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="结束日期"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{$moment(scope.row.endTime).format('YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>                
                <el-table-column
                    prop="timeoff_days"
                    label="请假天数"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.leaveTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="请假类型"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.leaveType | dataFormat(leaveTypeArray)}}</div>
                    </template>                    
                </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="queryLeaveResult(scope.row)">查看审批结果</el-button>                     
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="updateCustomerDialog(scope.row)">撤回</el-button>   
                </template>
            </el-table-column>                
            </el-table>
        </div>



        <div>
        <!--prev表示上一页，next为下一页，pager表示页码列表,total表示总条目数，size用于设置每页显示的页码数量。-->
            <el-pagination
                background
                layout="total,prev,sizes, pager, next,jumper"
                :total="total"
                :page-sizes="[5, 10, 15, 20]"
                :page-size.sync="formSearch.pageSize"
                :current-page.sync="formSearch.pageNum"
                @current-change="getPage"
                @size-change="getPage"
                style="float: right">
            </el-pagination>
        </div>


        <el-dialog
            title="请假申请单"
            :visible.sync="dialogFormVisible"
            :before-close="handleDialogClose">
            <el-form
                ref="addLeaveForm"
                :model="addLeaveForm"
                label-position="right"
                label-width="140px">
                <el-form-item label="开始时间:">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="addLeaveForm.startTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="addLeaveForm.startTime" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间:">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="addLeaveForm.endTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="addLeaveForm.endTime" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>                
                <el-form-item
                    label="请假天数:">
                    <el-input-number
                        v-model="addLeaveForm.leaveTime"
                        :min="1"
                        >
                    </el-input-number>
                </el-form-item>
                <el-form-item
                    label="请假类型:">
                    <el-select
                        v-model="addLeaveForm.leaveType"
                        placeholder="请选择请假类型"
                        size="small">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="请假原因:">
                    <el-input
                        type="textarea"
                        :rows="5"
                        v-model="addLeaveForm.leaveInfo"
                        size="small">
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="审批人:">
                    <el-timeline>
                        <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index">
                            {{activity.personName}}
                            <div class="block"><el-avatar shape="square" :size="50" :src="activity.handleImage"></el-avatar></div>
                        </el-timeline-item>
                    </el-timeline>
                </el-form-item>                
            </el-form>
                <div
                    slot="footer"
                    class="dialog-footer">
                    <el-button
                        @click="handleDialogClose"
                        size="small">
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        @click="saveLeave"
                        size="small">
                        确 定
                    </el-button>
                </div>
        </el-dialog>
        <div>
            <el-dialog
                title="查看审批流程"
                :visible.sync="queryFormVisible">
                <el-timeline>
                    <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="$moment(new Date()).format('YYYY-MM-DD')" placement="top"
                    >
                        <div class="block">
                            <el-card>
                                <h4>{{activity.personName}}</h4>
                                <el-avatar shape="square" :size="50" :src="activity.handleImage"></el-avatar>
                                <p>{{activity.personName}} 于 {{$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')}} <el-tag>已同意</el-tag> </p>
                            </el-card>
                        </div>
                    </el-timeline-item>
                </el-timeline>              
            </el-dialog>            
        </div>
    </div>
</template>

<script>
import dept from '../../../api/department.js';
import leave from '../../../api/leave.js';

export default {
    data() {
        return {
            tableData:[],
            total:0,
            formSearch:{
                pageNum:1,
                pageSize:10
            },
            //dialog的显示
            dialogFormVisible: false,
            //表单初始化
            addLeaveForm: {
            },
            //1年假，2事假，3病假，4调休假，5婚假，6产假，7陪产假，8其他
            leaveTypeArray:[
                {value:1,name:'年假'},
                {value:2,name:'事假'},
                {value:3,name:'病假'},
                {value:4,name:'调休假'},
                {value:5,name:'婚假'},
                {value:6,name:'产假'},
                {value:7,name:'陪产假'},
                {value:8,name:'其他'},                                                                
            ],
            //1年假，2事假，3病假，4调休假，5婚假，6产假，7陪产假，8其他
            options: [
                {value: '2',label: '事假'}, 
                {value: '3',label: '病假'}, 
                {value: '5',label: '婚假'}, 
                {value: '1',label: '年假'},
                {value: '6',label: '产假'},
                {value: '4',label: '调休假'}, 
                {value: '7',label: '陪产假'},
                { value: '8',label: '其他'}
            ],
            activities: {},
            //查看审批结果
            queryFormVisible:false,
        }
    },
    created(){
        this.getPage();
    },
    filters:{
        //类型过滤
        dataFormat(value,list){
            return value || value == '1' ? list.filter( (item) => item.value == value)[0].name:""
        }
    },
    methods: {
        //打开请假申请单
        timeoffFormDisplay() {
            this.queryUserByDept();
            this.dialogFormVisible = true;
        },
        //当对话框关闭时，初始化数据
        handleDialogClose() {
            this.addLeaveForm = {
                startTime: '',
                endTime: '',
                leaveType: '',
                leaveInfo: '',
                leaveTime: ''
            };
            this.dialogFormVisible = false;
        },
        async getPage(){
            const res = await leave.list(this.formSearch);
            if(res.data.code=== '000'){
                this.tableData=res.data.data.records;
                this.total=res.data.data.total;
            }
        },
        //查询当前登录人的直系领导和上级领导
        async queryUserByDept(){
            const res = await dept.queryUserByDept();
            if(res.data.code === '000'){
                this.activities = res.data.data.dept
                this.addLeaveForm.currentDeptUserId = res.data.data.dept.currentDept.userId
                this.addLeaveForm.parentDeptUserId = res.data.data.dept.parentDeptUser.userId
            }
        },
        //请假申请
        saveLeave(){
            this.$refs.addLeaveForm.validate((valid) => {
                if (valid) {
                leave.saveLeave(this.addLeaveForm).then(res =>{
                    if(res.data.code=== '000'){
                        this.handleDialogClose();
                        this.getPage()
                        this.$message.success("添加成功")
                    }else{
                        this.$message.error("添加失败")
                    }
                })
                } else {
                return false;
                }
            });            
        },
        //查看审批结果
        queryLeaveResult(){
            this.queryUserByDept()
            this.queryFormVisible = true
        }
    }
}
</script>

<style lang="css">
.top_block{
    width: 100%;
    height: 50px;
    background:white;
    border-radius: 10px;

}
.table_block{
    margin-top: 50px;
}
.timeoffButton {
    margin-top: 10px;
    margin-left: 80px;
    float: left;
}
.tableDatadisplay {
    margin-bottom: 40px;
}
.timeoffDecs {
    width: 350px;
}
.timeoffType {
    width: 220px;
}
</style>